<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/jquery-jcrop/2.0.4/css/Jcrop.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/news.css">
    <link rel="stylesheet" href="./css/registered.css">
    <link rel="stylesheet" href="./css/manage.css">
    <style>
        html,
        body {
            background: #e9f0fa !important;
        }

        button.btn-lightblue {
            background: #087fff;
            color: #fff;
            border: none;
            margin-top: 30px;
        }

        button.btn-lightblue.focus,
        button.btn-lightblue:focus,
        button.btn-lightblue:hover {
            color: #fff;
        }

        .panel-heading.lightblue p span.registered {
            background: url(./images/person5.png) no-repeat center;
            background-size: cover;
        }

        body {
            font-size: 16px;
            font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif
        }

        *,
        *:before,
        *:after {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -ms-box-sizing: border-box;
            box-sizing: border-box;
        }

        .crop-picker-wrap {
            position: relative;
            width: 100px;
            height: 30px;
            overflow: hidden;
        }

        .crop-picker {
            width: 100%;
            height: 100%;
            line-height: 1;

            -webkit-appearance: none;
            margin: 0;
            border: none;
            border-radius: 5px;
            padding: 9px 0;
            background-color: #1ab2ff;

            color: #fff;
            cursor: pointer;
        }

        .crop-picker-file {
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            opacity: 0;
            cursor: pointer;
            filter: alpha(opacity=0);
        }

        .crop-wrapper {
            display: inline-block;
            min-width: 750px;
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 0 5px 2px #ccc;
        }

        .crop-container {
            font-size: 0;
        }

        .crop-container img[src=""] {
            visibility: hidden;
        }

        .crop-area-wrapper,
        .crop-preview-wrapper {
            display: inline-block;
            vertical-align: top;
        }

        .crop-area-wrapper {
            width: 500px;
            height: 400px;
        }

        .crop-preview-wrapper {
            width: 200px;
            height: 200px;
            margin-left: 28px;
            overflow: hidden;
        }

        .crop-preview-container {
            position: relative;
            overflow: hidden;
        }

        .crop-operate {
            text-align: center;
            margin: 10px 0;
        }

        .crop-save,
        .crop-cancel {
            display: inline-block;
            vertical-align: middle;

            width: 150px;
            height: 50px;
            line-height: 50px;

            -webkit-appearance: none;
            margin: 0 5px;
            border: none;
            border-radius: 5px;
            background-color: #1ab2ff;

            color: #fff;
            cursor: pointer;
        }

        .crop-hidden {
            display: none;
        }
    </style>
</head>

<body>
    <div class="news_panel">
        <h3 class="text-primary">个人中心</h3>
        <!-- 面包屑 -->
        <div class="ol breadcrumb">
            <li>
                首页
            </li>
            <li>
                <a href="#">
                    个人中心
                </a>
            </li>
        </div>
        <!-- 新闻面板 -->
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default panel-registered">
                    <div class="panel-heading lightblue">
                        <p>
                            <span class="registered"></span> 基本资料</p>
                    </div>
                    <div class="panel-body" id="registered">
                        <form action="" class="form-horizontal">
                            <div class="form-group">
                                <label for="avator" class="control-label col-md-1">头像</label>
                                <div class="col-md-5">
                                    <!-- <input type="text" class="form-control" name="avator" id="avator" placeholder="请输入用户名"> -->
                                    <div id="TCrop"></div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="tel" class="control-label col-md-1">手机号</label>
                                <div class="col-md-5">
                                    <input type="text" class="form-control" name="tel" id="tel" placeholder="请输入人员手机号码" value="15888888888">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="age" class="control-label col-md-1">年龄</label>
                                <div class="col-md-5">
                                    <input type="text" class="form-control" name="age" id="age" placeholder="请输入年龄">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="address" class="control-label col-md-1">住址</label>
                                <div class="col-md-5">
                                    <input type="text" class="form-control" name="address" id="address" placeholder="请输入住址">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-3">
                                    <button type="button" class="btn btn-lightblue btn-block">
                                        提交
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script> -->
    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
    <script src="https://cdn.bootcss.com/jquery-jcrop/2.0.4/js/Jcrop.min.js"></script>
    <script src="./js/imgUpload.js"></script>
    <script>
        $(function () {
            Crop.init({
                id: 'TCrop',
                /* 上传路径 */
                url: '',
                /* 允许上传的图片的后缀 */
                allowsuf: ['jpg', 'jpeg', 'png', 'gif'],
                /* JCrop参数设置 */
                cropParam: {
                    minSize: [50, 50],          // 选框最小尺寸
                    maxSize: [300, 300],        // 选框最大尺寸
                    allowSelect: true,          // 允许新选框
                    allowMove: true,            // 允许选框移动
                    allowResize: true,          // 允许选框缩放
                    dragEdges: true,            // 允许拖动边框
                    onChange: function (c) { },   // 选框改变时的事件，参数c={x, y, x1, y1, w, h}
                    onSelect: function (c) { }    // 选框选定时的事件，参数c={x, y, x1, y1, w, h}
                },
                /* 是否进行裁剪，不裁剪则按原图上传，默认进行裁剪 */
                isCrop: true,
                /* 图片上传完成之后的回调，无论是否成功上传 */
                onComplete: function (data) {
                    console.log('upload complete!');
                }
            });
        });
    </script>
</body>

</html>